<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" width="800" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
// import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema, useForm, BasicForm } from '/@/components/Form';

import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构
// Emits声明
const emit = defineEmits(['success']);

//设置标题
const title = '测试父子组件传值';

const [registerForm, { setProps, validate,updateSchema, setFieldsValue, getFieldsValue }] = useForm({
  labelWidth: 120,
  schemas: [
    {
      label: '系数名称',
      field: 'xsName',
      component: 'Input',
      dynamicDisabled: () => true,
    },
    {
      label: '设置值',
      field: 'remark',
      component: 'InputTextArea',
    }
  ],
  actionColOptions: {
    span: 24,
  },
  // baseColProps: {
  //   span: 24,
  // },
  compact: true,
  showResetButton: false,
  showSubmitButton: false,
  showAdvancedButton: false,     //高级按钮，重置后面的收起、展开
  disabled: false,
});


//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {

});


//表单提交事件
async function handleSubmit(v) {
  // closeModal();

  //获取表单输入的所有值，不包含禁用字段
  let fieldsValue = await getFieldsValue();
  console.log('fieldsValue1:::', fieldsValue);
  //获取验证通过后获取所有字段值，包含禁用字段
  fieldsValue = await validate();
  console.log('fieldsValue2:::', fieldsValue);
  //获取指定字段的值
  fieldsValue = await validate(['remark']);
  console.log('fieldsValue3:::', fieldsValue);
  emit('success', fieldsValue.remark);
}

/**
 * 成功
 */
function success() {

}
</script>

<style scoped>
/*查询组件input有后缀，隐藏掉*/
:deep(.ant-input-suffix) {
  display: none;
}
</style>
